
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>工作与生活平衡 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>工作与生活平衡 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">概念</div>
          <div class="card-question">根据文档，“工作与生活平衡”的核心概念是什么？它是否意味着工作和个人时间必须完全相等？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">概念</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">“工作与生活平衡”并不意味着工作时间和个人时间要完全对等。其核心概念是指一个人能够在工作、家庭、健康、个人兴趣等方面合理安排时间，确保这些重要方面都能得到满足，而不会为了某一方面而牺牲其他方面。</div>
          </div>
          <div class="card-source">来源: 1.1 工作与生活平衡的概念</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">意义</div>
          <div class="card-question">实现工作与生活平衡对个人的职业发展有哪些至关重要的意义？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">意义</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">它对职业发展有三重意义：首先，适当的休息能恢复精力，提高工作效率；其次，良好的家庭和个人生活能提供情感支持，帮助人从容应对工作压力；最后，避免因长期忽视生活和健康导致的职业倦怠和心理问题，从而保障长期的工作表现。</div>
          </div>
          <div class="card-source">来源: 1.2 平衡的意义</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">策略</div>
          <div class="card-question">在进行时间管理时，除了制定任务清单，文档还提到了什么技巧来避免焦虑并提高效率？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">策略</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档中提到要学会设定“缓冲时间”，即在各项任务之间预留一定的空余时间。这个技巧可以用来处理突发事件或进行短暂休息，不仅能提高效率，还能有效避免因时间紧迫而产生的焦虑感。</div>
          </div>
          <div class="card-source">来源: 2.1 制定清晰的工作计划</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">方法</div>
          <div class="card-question">当需要拒绝不必要的工作请求时，文档建议了哪三个具体步骤？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">方法</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档建议的三个步骤是：1. 评估任务的优先级，确保自己有足够时间处理更重要的工作；2. 清晰地表明自己在特定时间段内不能接受额外的工作请求；3. 提供合理的替代方案或建议延迟处理，以避免让对方感觉不合作。</div>
          </div>
          <div class="card-source">来源: 3.2 学会拒绝无关紧要的工作</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">原则</div>
          <div class="card-question">为什么说周末和假期的“休息质量”比“休息数量”更重要？如何提高休息质量？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">原则</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">因为如果只是被动地睡觉或刷剧，对缓解工作压力的作用有限。为了提高休息质量，可以进行一些有意义的活动，例如参与户外运动、练习冥想或进行短途旅行，这些活动能更有效地缓解压力、增强体力，为后续工作做好准备。</div>
          </div>
          <div class="card-source">来源: 4.1 休息时间的质量高于数量</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">企业责任</div>
          <div class="card-question">企业可以从哪三个方面入手来支持员工实现工作与生活的平衡？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">企业责任</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">企业可以从三个方面提供支持：1. 提供灵活的工作安排，如弹性工作时间和远程办公；2. 提供员工福利与支持，如健康检查、健身福利和心理健康支持；3. 培养关注员工福祉的企业文化，提高员工的满意度和忠诚度。</div>
          </div>
          <div class="card-source">来源: 6. 企业如何支持员工的工作与生活平衡</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
